<template>
    <div>
        <el-header>
            <el-row style="margin-top:2rem;" :gutter="20">
                <el-col :span="6">
                    <img src="../assets/mall.png" style="height:3rem" @click="skip_index">
                </el-col>
            </el-row>
        </el-header>
        <el-main style="margin-top:1rem;">

            <el-row
                style="height:700px;background:url('http://i1.mifile.cn/f/i/2019/mitv5/e75/part20.jpg');background-position:left -300px top -90px;">
                <el-col :offset="14" :span="8" style="margin-top:6rem;">
                    <el-row style="width:400px;height:500px;padding:10px;background:#fefeff;">

                        <el-col :span="20" :offset="2" style="margin-top:2rem;">
                            <h4 style="text-align:center;color:#423e3e;">请先登陆</h4>
                        </el-col>
                        <el-col :span="20" :offset="2" style="margin-top:2rem;">
                            <el-input v-model="login_username" placeholder="用户名或手机号"></el-input>
                        </el-col>
                        <el-col :span="20" :offset="2" style="margin-top:2rem;">
                            <el-input type="password" v-model="login_password" placeholder="密码"></el-input>
                        </el-col>
                        <el-col :span="20" :offset="2" style="margin-top:3rem;text-align:right;">
                            <el-button @click="register">注册</el-button>
                            <el-button @click="login">登陆</el-button>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </el-main>
        <el-dialog :visible.sync="dialogVisible" width="40%">
            <el-row style="height:30rem;">
                <el-col :span="16" :offset="4" style="margin-top:1rem;">
                    <el-form :model="ruleForm" :rules="rules" ref="dovalid" label-width="100px">
                        <el-form-item>
                            <h2 style="text-align:center">注册</h2>
                        </el-form-item>
                        <el-form-item label="用户名" prop="username">
                            <el-input v-model="ruleForm.username" placeholder="不能有中文"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input type="password" v-model="ruleForm.password" autocomplete="off">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="确认密码" prop="check_pass">
                            <el-input type="password" v-model="ruleForm.check_pass" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号" prop="phone">
                            <el-input v-model="ruleForm.phone" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item style="text-align:center">
                            <el-button @click="sub">提交</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>

<style scoped>

</style>

<script>
    export default {
        data: function () {
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            var notchinese = (rule, value, callback) => {
                //校验中文的正则：/^[\u4e00-\u9fa5]{0,}$/
                let arr = value.split('')

                function test_chinese(value) {
                    if (/^\w+$/.test(value) != true) {
                        return true
                    }
                    return false
                }
                for (const iterator of arr) {
                    if (test_chinese(iterator)) {
                        return callback(new Error('不可以包含中文!'))
                    }
                }
                callback()
            }
            // 手机号验证
            const validatePhone = (rule, value, callback) => {
                if (value === "") {
                    callback(new Error("请输入手机号"));
                } else {
                    if (!/^1[3456789]\d{9}$/.test(value)) {
                        callback(new Error("请输入正确的手机号"));
                    } else {
                        callback();
                    }
                }
            };
            return {
                login_username: '',
                login_password: '',


                dialogVisible: false,

                ruleForm: {
                    username: '',
                    password: '',
                    check_pass: '',
                    phone: ''
                },
                rules: {
                    username: [{
                            required: true,
                            message: '请输入用户名',
                            trigger: 'blur'
                        },
                        {
                            min: 6,
                            max: 15,
                            message: '长度在 6 到 15 个字符',
                            trigger: 'blur'
                        },
                        {
                            validator: notchinese,
                            trigger: 'blur'
                        },
                    ],
                    password: [{
                            required: true,
                            message: '请输入密码',
                            trigger: 'blur'
                        },
                        {
                            min: 6,
                            max: 15,
                            message: '长度在 6 到 15 个字符',
                            trigger: 'blur'
                        }
                    ],
                    check_pass: [{
                            required: true,
                            message: '请验证密码',
                            trigger: 'blur'
                        },
                        {
                            validator: validatePass2,
                            trigger: 'blur'
                        }
                    ],
                    phone: [{
                            required: true,
                            message: '请输入手机号',
                            trigger: 'blur'
                        },
                        {
                            validator: validatePhone,
                            trigger: 'blur'
                        }
                    ],
                },




            }
        },
        methods: {
            skip_index() {
                this.$router.push("index")
            },
            register() {
                this.dialogVisible = true

                this.ruleForm.username = ''
                this.ruleForm.password = ''
                this.ruleForm.check_pass = ''
                this.ruleForm.phone = ''
            },
            sub() {
                this.$refs.dovalid.validate((valid) => {
                    if (valid) {
                        this.$axios.post(this.$store.state.base_url + "/user/register", this.ruleForm).then(
                            data => {
                                let code = data.data.code
                                if (code == "FAILLURE") {
                                    this.$message.error(data.data.message);
                                } else {
                                    this.$message({
                                        message: '注册成功，请登陆',
                                        type: 'success'
                                    });
                                    this.dialogVisible = false
                                }
                            })
                    } else {
                        console.log("not ok")
                        return false
                    }
                })
            },
            login() {
                let url="";
                if (/^1[3456789]\d{9}$/.test(this.login_username)) {
                        url=this.$store.state.base_url + "/user/login?phone="+this.login_username+"&password="+this.login_password
                    } else {
                        url=this.$store.state.base_url + "/user/login?username="+this.login_username+"&password="+this.login_password
                    }
                    console.log(url)
                this.$axios.get(url).then(data => {
                    console.log(data)
                    let code = data.data.code
                    if (code == "FAILLURE") {
                        this.$message.error(data.data.message);
                    } else {
                        this.$message({
                            message: '登陆成功',
                            type: 'success'
                        });
                        localStorage.setItem('token',data.data.data.token)
                        this.$router.go(-1)
                    }
                })
            }
        }
    }
</script>